<template>
  <div class="engagement-sources-card">
    <div class="engagement-header">
      <div class="engagement-title">Engagements By Sources</div>
      <div class="engagement-count">173 posts</div>
    </div>
    <div class="engagement-chart" ref="chartContainer">
      <PieChart :option="LanguaeChartOption" :height="'2.2rem'"></PieChart>
    </div>
    <div class="stats-table-container" ref="tableContainer">
      <!-- 给包含表格的div添加类名 -->
      <table class="stats-table">
        <!-- 给table添加类名 -->
        <tbody>
          <tr>
            <td class="stat-label">Posts</td>
            <!-- 给指标名称td添加类名 -->
            <td
              v-for="(item, index) in postData"
              :key="index"
              class="stat-value"
            >
              {{ item }}
            </td>
            <!-- 给数据td添加类名 -->
          </tr>
          <tr>
            <td class="stat-label">Avg.Int.</td>
            <td
              v-for="(item, index) in avgIntData"
              :key="index"
              class="stat-value"
            >
              {{ item }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import PieChart from "@components/common/PieChart.vue";
export default {
  components: {
    PieChart,
  },
  data() {
    return {
      postData: [23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23], // 调整为12个月数据
      avgIntData: [45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45], // 调整为12个月数据
      LanguaeChartOption: {
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(255, 255, 255, 0.95)",
          borderColor: "#eee",
          borderWidth: 1,
          textStyle: {
            color: "#333",
            fontSize: 12,
          },
          padding: 10,
          extraCssText: "box-shadow: 0 2px 10px rgba(0,0,0,0.1);",
          // 自定义提示框内容，只显示"语言: 百分比"
          formatter: function (params) {
            // 显示格式：互动类型: 数值
            return `${params.seriesName}: ${params.value}k`;
          },
        },

        grid: {
          top: "20%",
          left: 8,
          right: "3%",
          bottom: "30%",
          containLabel: true,
        },
        legend: [
          {
            orient: "horizontal",
            left: "0%", // 使用百分比定位
            bottom: "0%",
            formatter: (name) => {
              // 找到对应系列
              const series = this.LanguaeChartOption.series.find(
                (s) => s.name === name
              );
              // 计算该系列数据总和
              const total = series.data.reduce((a, b) => a + b, 0);
              return `${name}`;
            },
            textStyle: {
              // 普通文本样式（名称）
              color: "#6a6969",
              fontSize: 12,
              lineHeight: 22, // 行高与图标高度一致（itemHeight: 22）
              rich: {
                valueStyle: {
                  fontWeight: "bold", // 数值加粗
                  // 若需单独设置数值颜色，可添加 color: "#232323"
                },
              },
              padding: [0, 0, 0, 4], // 左侧内边距增加 4px，使文字右移
            },
            itemWidth: 8, // 缩小圆点大小
            itemHeight: 8,
            itemGap: 20,
            icon: "circle",

            data: [
              "Instagram",
              "X",
              "LinkedIn",
              "Reddit",
              "YouTube",
              "TikTok",
            ].map((name) => ({
              name,
              // 移除icon配置，使用默认圆点
              textStyle: { color: "#454545" },
            })),
          },
        ],
        xAxis: {
          boundaryGap: false,
          type: "category",
          data: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec",
          ], // 12个月缩写
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#232323",
            fontSize: 10,
            fontWeight: 400,
            interval: 0,
            align: "center",
          },
        },
        yAxis: [
          {
            offset: 10,
            type: "value",
            axisLabel: {
              formatter: function (value) {
                // 只显示0,40,60,80,100，其他刻度返回空字符串
                return [0, 40, 60, 80, 100].includes(value) ? value + "k" : "";
              },
              align: "right",
              margin: 38,
              color: "#454545",
              fontSize: 10,
              overflow: "truncate",
              fontWeight: 400,
            },
            name: "#of voices",
            nameGap: 30, // 名称与轴线的距离（单位：像素）
            nameTextStyle: {
              color: "#454545", // 名称字体颜色（例如红色）
              fontSize: 12, // 名称字体大小
              fontWeight: 400, // 可选：加粗
              align: "right",
              verticalAlign: "middle",
              rotate: 270,
              padding: [0, 0, 0, 15],
            },
            min: 0,
            max: 100,
            interval: 20,
            position: "left",
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "Instagram",
            stack: "演示柱状图",
            barWidth: 30,
            barCategoryGap: "50%",
            barGap: "30%", // 堆叠柱状图必须设为0%
            data: [10, 12, 15, 18, 20, 22, 25, 28, 25, 22, 18, 20],
            type: "bar",
            itemStyle: {
              color: "#EFB82C",
              borderRadius: [4, 4, 4, 4],
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
          {
            name: "X",
            stack: "演示柱状图",
            barWidth: 30,
            barCategoryGap: "50%",
            barGap: "30%",
            data: [10, 12, 15, 18, 20, 22, 25, 28, 25, 22, 18, 20],
            type: "bar",
            itemStyle: {
              color: "#CE4049",
              borderRadius: [4, 4, 4, 4],
              borderColor: "#fff",
              borderWidth: 1,
            },
          },

          {
            name: "LinkedIn",
            stack: "演示柱状图",
            barWidth: 30,
            barGap: "30%", // 堆叠柱状图必须设为0%
            barCategoryGap: "50%",
            data: [10, 12, 15, 18, 20, 22, 25, 28, 25, 22, 18, 20],
            type: "bar",
            itemStyle: {
              color: "#A563EA",
              borderRadius: [4, 4, 4, 4],
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
          {
            name: "Reddit",
            stack: "演示柱状图",
            barGap: "30%", // 堆叠柱状图必须设为0%
            barWidth: 30,
            barCategoryGap: "50%",
            data: [8, 10, 12, 15, 18, 20, 22, 25, 22, 20, 15, 18],
            type: "bar",
            itemStyle: {
              color: "#22BCC2",
              borderRadius: [4, 4, 4, 4],
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
          {
            name: "YouTube",
            stack: "演示柱状图",
            barWidth: 30,
            barCategoryGap: "50%",
            barGap: "30%", // 堆叠柱状图必须设为0%
            data: [0, 12, 15, 18, 20, 22, 25, 28, 25, 22, 18, 20],
            type: "bar",
            itemStyle: {
              color: "#8FC8F7",
              borderRadius: [4, 4, 4, 4],
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
          {
            name: "TikTok",
            stack: "演示柱状图",
            barWidth: 30,
            barCategoryGap: "50%",
            barGap: "30%", // 堆叠柱状图必须设为0%
            data: [30, 12, 15, 18, 20, 22, 25, 28, 25, 22, 18, 20],
            type: "bar",
            itemStyle: {
              color: "#1D6EB1",
              borderRadius: [4, 4, 4, 4],
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.syncLayout();
      window.addEventListener("resize", this.syncLayout);
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.syncLayout);
  },

  methods: {
    syncLayout() {
      const chartContainer = this.$refs.chartContainer;
      const tableContainer = this.$refs.tableContainer;

      if (chartContainer && tableContainer) {
        // 图表容器宽度同步给表格
        tableContainer.style.width = `${chartContainer.offsetWidth}px`;

        // 或：表格宽度同步给图表（需图表支持动态宽度）
        // chartContainer.style.width = `${tableContainer.offsetWidth}px`;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.engagement-sources-card {
  position: relative;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  //   justify-content: space-between;
  //   margin-top: 32px;
  // width: 3.8958rem;
  //   width: 3.8958rem;
  //   height:1.7569rem;
  padding: 16px 24px;
  border-radius: 8px;
  border: 1px solid #cdcccc;
  .engagement-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    .engagement-title {
      font-size: 18px;
      color: #454545;
      font-weight: 600;
    }
    .engagement-count {
      font-size: 12px;
      color: #454545;
      font-weight: 600;
    }
  }
  .stats-table-container {
    position: absolute;
    left: 5%;
    bottom: 18%;
    width: 100%;
    box-sizing: border-box; // 确保边框不影响宽度计算
  }

  .stats-table {
    width: 100%; // 与图表容器同宽
    border-collapse: collapse;
    table-layout: fixed; // 核心：固定列宽
    border-spacing: 0; // 移除单元格间距
  }

  .stat-label {
    font-size: 10px;
    font-weight: 400;
    color: #232323;
    text-align: left;
    // 首列宽度：根据内容自适应，建议固定为合适值
    width: 80px; // 固定首列宽度（根据内容调整，例如"Posts"和"Avg.Int."的宽度）
    padding-left: 4px; // 增加左侧内边距，避免文字贴边
  }

  .stat-value {
    width: calc((100% - 80px) / 12);
    text-align: center; // 数据居中，与柱状图类目标签对齐
    padding: 4px 8px;
    font-size: 10px;
    color: #6a6969;
  }

  .stats-table tr .stat-value {
    border-bottom: none;
  }
  // 为数据列设置宽度（根据X轴类目数量平均分配）
  td:first-child {
    width: auto; // 取消强制百分比
  }
  td:not(:first-child) {
    width: inherit; // 继承.stat-value的计算宽度
  }
}
</style>
